<template>
  <div class="special-list" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" ref="specialList">
    <div class="special-wrapper" ref="specialWrapper"  v-if="list.length">
      <div class="panel" v-for="item in list" :key="item.id">
        <div class="img"><img :src="item.img"/></div>
        <div class="tit">{{item.name}}</div>
      </div>
    </div>
    <div class="loading-container" v-show="!list.length">
      <loading></loading>
    </div>
  </div>
</template>

<script>
  import loading from '@/components/loading/loading';
  export default {
    props: {
      list: Array
    },
    name: '',
    data() {
      return {
        moveX: 0
      }
    },
    mounted(){
      this.unMore = !this.loading
    },
    methods: {
      onTouchStart(e) {
        this.pageX1 = e.touches[0].pageX;
        this.moveMaxWidth = this.$refs.specialWrapper.offsetWidth - this.$refs.specialList.offsetWidth;
      },
      onTouchMove(e) {
        if(this.moveMaxWidth <= 0){
          return;
        }
        this.pageX2 = e.touches[0].pageX;
        let moveX = this.pageX2 - this.pageX1;
        this.moveEnd = this.moveX + moveX;
        if(this.moveEnd >= 0) this.moveEnd = 0;
        if(this.moveEnd <= -this.moveMaxWidth) this.moveEnd = -this.moveMaxWidth;
        this.$refs.specialWrapper.style.transform = `translate3d(${this.moveEnd}px,0,0)`;
        this.$refs.specialWrapper.style.transform = `-webkit-translate3d(${this.moveEnd}px,0,0)`;
      },
      onTouchEnd(e){
        this.moveX = this.moveEnd;
      }
    },
    components: {
      loading
    }
  }
</script>

<style scoped lang="less">
  @import '../../common/less/variable';
  .special-list{
    white-space: nowrap;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    height: 95px;
    background-color: #fff;
    .special-wrapper{
      width: auto;
      white-space: nowrap;
      display: inline-block;
    }
    &::-webkit-scrollbar{
      display: none;
    }
    .panel{
      display: inline-block;
      margin: 0 15px;
      padding-top: 13px;
      text-align: center;
      .img{
        width: 42px;
        height: 42px;
        margin: 0 auto;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .tit{
        padding-top: 10px;
        font-size: @font-size-medium;
      }
    }
    .loading-container{
      background-color: @color-background-l;
      flex: 1;
      text-align: center;
      .loading{
        margin-top: 26px;
      }
    }
  }
</style>
